import React, { Component } from 'react'
import { Card } from 'antd'
import '../../less/index.less'
import '../../less/program-list.less'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'
import TopicBox from './topic-box'
import UrlPattern from 'url-pattern'
import * as topicActions from '../../actions/topic'
import * as progarmActions from '../../actions/progarm'
import { convertContent } from '../../constant/lang-util'

class InstructorProgramPageBody extends Component {
  constructor (props) {
    super(props)
    this.state = {
      programId: 1
    }
  }

  componentDidMount () {
    const pattern = new UrlPattern('/program/:programId')
    const urlParams = pattern.match(this.props.location.pathname)
    const programId = urlParams.programId
    this.setState({
      programId
    }, () => {
      this.props.getAllTopicTasks(programId)
    })
    this.props.getProgramByProgramId(programId)
  }

  render () {
    const {program} = this.props
    const topicTasks = this.props.allTopicTasks
    const topics = topicTasks.map(all => all.topics)

    return (
      <Card title={`${program.title} / ` + convertContent('主题管理')} hoverable bordered={false}>
        <TopicBox topics={topics}
          programId={this.state.programId}
          allTopicTasks={this.props.allTopicTasks} />
      </Card>
    )
  }
}

const mapStateToProps = state => ({
  allTopicTasks: state.allTopicTasks,
  currentTopicTasks: state.instructorCurrentTopicTasks,
  instructorPrograms: state.instructorPrograms,
  program: state.program
})

const mapDispatchToProps = dispatch => ({
  getPrograms: () => dispatch(progarmActions.getPrograms()),
  getProgramByProgramId: (programId) => dispatch(progarmActions.getProgramByProgramId(programId)),
  getAllTopicTasks: programId => dispatch(topicActions.getAllTopicTask(programId))
})

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(InstructorProgramPageBody))
